<template>
   <el-select @change="selectChange" :value='value' placeholder="请选择">
       <!-- select的values就是被选中的option的valur值 -->
       <!-- label给用户的提示，value才是收集给后台的id -->
        <el-option
        v-for="item in channels"
        :key="item.id"
        :label="item.name"
        :value="item.id">
        </el-option>
    </el-select>
</template>

<script>
import { reqGetChannels } from '@/api/articles.js'
export default {
  name: 'MyChannels',
  data () {
    return {
      channels: [] // 存放所有的频道列表
    }
  },
  props: ['value'], // 父组件传递过来一个channel_id
  created () {
    this.loadChannels()
  },
  methods: {
    async loadChannels () {
      try {
        const res = await reqGetChannels()
        this.channels = res.data.data.channels
        console.log(res)
      } catch (err) {
        console.log(err)
      }
    },
    selectChange (value) {
    //   console.log(value)
      // 子传父
      this.$emit('input', value)
    }
  }
}
</script>

<style>

</style>
